<template>
  <Com class="jimu-sidebar-item" @mouseenter.enter="onMouseenter" ref="refSidebar">
    <router-link tag="a" :to="to" :title="label">
      <i :class="icon||'el-icon-menu'"></i>
      {{label}}
    </router-link>
  </Com>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Com from '../../common/Com.vue'

export default defineComponent({
  name: 'SidebarItem',
  components: {Com},
  props: {
    label: String,
    icon: String,
    to: Object
  },
  setup() {
    const refSidebar = ref(null)
    const onMouseenter = function(){
      (refSidebar.value as any).style.width = '200px';
    }

    return {
      onMouseenter
    }
  },
})
</script>

<style lang="scss" scoped>
.jimu-sidebar-item{
  box-sizing: border-box;
  width: 200px;
  display: flex;
  
  flex-direction: column;
  font-size:20px;
  text-align: center;
  height: 40px;
  justify-content: center;
  cursor: pointer;

  a{
    color: #252b3a;
  }
}
</style>